<!-- CourseList.vue -->
<template>
  <div>
    <navigation-bar></navigation-bar>

    <div class="top">
      <div class="nav">
        <CourseSearchBar />
      </div>
      <div class="courseList">
        <div
          v-for="course in courses"
          :key="course.courseId"
          class="courseItem"
        >
          <router-link
            :to="{ path: '/course', query: { courseId: course.courseId } }"
          >
            <img :src="course.image" alt="Course image" class="img" />
            <el-row justify="space-between">
              <el-col :span="8">
                <h4>
                  {{ course.type }}
                </h4>
              </el-col>
              <el-col :span="13">
                <el-rate
                  class="rate"
                  v-model="course.rate"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}星"
                />
              </el-col>
            </el-row>
          </router-link>
        </div>
      </div>

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="660"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    let page = ref(parseInt(route.query.page) || 1);
    let courses = ref([]);
    // const imgModules = Object.values(import.meta.glob("/onlyNeededImg/*.jpg"));
    let courseRate = ref([]);
    courseRate.length = 8;

    const types = [
      "荣誉课程",
      "人气课程",
      "高分课程",
      "基础课程",
      "进阶课程",
      "探索课程",
      "超值课程",
    ];
    const validCourseIds = ref([
      3, 8733, 2799, 4, 7, 8, 3251, 14, 9, 22, 3709, 3789, 41, 3796, 179, 4318,
      176, 4793, 5542, 89, 113, 7176, 277, 279, 7375, 338, 8258, 340, 8322, 367,
      9779, 407, 9781, 409, 9960, 410, 11162, 12200, 411, 12562, 415, 870, 412,
      1117, 417, 2481, 416, 2676, 418, 2789, 4324, 419, 4495, 413, 5492, 414,
      5516, 453, 420, 5525, 6693, 421, 7002, 422, 7004, 423, 424, 7423, 527,
      7436, 554, 9355, 867, 714, 3252, 764, 4641, 5238, 2851, 2911, 5286, 4527,
      5503, 6845, 5515, 6879, 6983, 7163, 7083, 7422, 7424, 7499, 7434, 7563,
      7439, 8313, 8731, 11621, 8262, 11624, 8263, 11984, 4510, 871, 5078, 6995,
      1599, 2853, 7570, 11619, 2999, 1123, 4421, 1130, 2621, 4422, 4748, 2915,
      4779, 3790, 5490, 4513, 5507, 5483, 6842, 6841, 6849, 7079, 7177, 7565,
      9105, 7088, 10644, 7180, 11163, 8256, 2076, 5, 2792, 8983, 2989, 9775,
      3253, 9776, 3795, 9863, 4405, 2376, 2377, 4417, 4609, 6994, 2809, 9043,
      2984, 9805, 3038, 9810, 4177, 5025, 10323, 11164, 11625, 6511, 11970,
      7087, 11974, 7246, 7421, 12520, 7435, 7457, 8311, 8617, 10632, 10666,
      11367, 12523, 717, 1129, 2788, 2733, 3712, 2805, 5076, 4322, 5282, 5770,
      6694, 6986, 5513, 7517, 7498, 666, 8839, 745, 9106, 835, 9865, 836, 9962,
      12083, 692, 2374, 865, 1122, 2808, 3975, 4521, 6989, 7099, 1128, 7179,
      2339, 2375, 2547, 7564, 2597, 8457, 2618, 8837, 2783, 10885, 3037, 4189,
      11980, 4321, 12726, 4408, 779, 5034, 1110, 5281, 1111, 2603, 6510, 7000,
      2797, 7432, 8246, 3602, 9050, 4420, 9777, 5032, 9825, 6513, 10112, 10122,
      7041, 844, 7561, 2343, 7673, 2985, 8984, 9104, 6508, 6847, 9834, 9957,
      7556, 8739, 9963, 10324, 11156, 667, 11154, 3403, 12196, 4559, 677, 4792,
      680, 180, 834, 1124, 1131, 7429, 1132, 7433, 2485, 2857, 7543, 4319, 7567,
      7672, 8309, 8619, 5523, 9820, 5534, 11161, 12524, 7426, 688, 7558, 715,
      7599, 1133, 8291, 2340, 9812, 11986, 2909, 12521, 2988, 12525, 3794, 1115,
      3012, 5502, 4320, 7518, 5236, 7569, 5284, 7597, 6691, 7990, 7542, 8581,
      9195, 10887, 11155, 11686, 11627, 11975, 12727, 839, 712, 859, 2584, 864,
      4520, 2785, 3787, 6843, 6990, 4409, 4419, 7040, 7374, 7598, 5301, 8584,
      6476, 8637, 6988, 8985, 7089, 11608, 7376, 11969, 7535, 11982, 8585, 1113,
      9778, 1134, 10637, 10642, 11978, 862, 888, 1112, 1598, 2077, 4441, 4642,
      5850, 6985, 7566, 7904, 9056, 11977, 11160, 882, 11971, 4418, 7118, 838,
      4670, 5316, 7091, 7181, 7430, 7568, 7595, 7437, 8239, 1749, 2378, 3958,
      8248, 4407, 8259, 6987, 8982, 6993, 3800, 7084, 9818, 7571, 8580, 4512,
      9045, 10132, 9049, 6984, 11157, 1114, 7425, 7557, 1951, 678, 2910, 8736,
      2991, 4323, 4325, 9147, 4511, 6528, 2625, 7128, 2855, 7162, 10631, 7431,
      6374, 7526, 6844, 8247, 8255, 6848, 8321, 9780, 7178, 9826, 837, 11412,
      840, 11628, 7415, 12518, 843, 1116, 12519, 782, 2373, 1499, 2787, 2583,
      8312, 5650, 6148, 4669, 10639, 665, 10641, 841, 11983, 1399, 12085, 12086,
      11158, 2078, 2061, 6880, 11620, 2602, 3255, 11679, 3256, 2800, 9051,
      12522, 4406, 9806, 5019, 10115, 833, 5062, 10277, 5514, 10635, 5955,
      10638, 6738, 5649, 6512, 6881, 6514, 7086, 11973, 3254, 7161, 7382, 12526,
      7416, 2580, 7537, 1118, 8257, 9356, 8616, 4794, 8838, 10886, 5027, 11678,
      5029, 11972, 10728, 6509, 11976, 7039, 12759, 7428, 7559, 7562, 7671, 842,
      873, 7903, 2434, 2452, 9959, 5518, 5524,
    ]);
    // console.log(imgModules);
    // console.log(imgModules[0].name);

    const handlePageChange = (newPage) => {
      router.push({ path: "/courses", query: { page: newPage } });
    };

    // const extractId = (name) => {
    //   const id = name.match(/\d+/);
    //   return id ? Number(id[0]) : null;
    // };

    const geneType = (id) => {
      const hash = ((id * 9301 + 49297) % 233280) / 233280.0;
      const index = Math.floor(hash * types.length);
      return types[index];
    };

    const geneRate = (id) => {
      for (let i = 0; i < 8; i += 1) {
        const hash = ((id * 9301 + 49297) % 233280) / 233280.0;
        const min = 3;
        const max = 5;
        const rate = min + (max - min) * hash;
        return Number(rate.toFixed(1));
      }
    };

    watch(
      () => route.query.page,
      (newPage) => {
        page.value = parseInt(newPage) || 1;

        const start = 8 * (page.value - 1);
        const end = 8 * page.value;
        const courseIdsThisPage = validCourseIds.value.slice(start, end);

        // console.log(page.value);
        // const imgFuns = imgModules.slice(start, end);
        const tmp = [];

        for (let i = 0; i < 8; i += 1) {
          const tmpCourseId = courseIdsThisPage[i];
          // console.log(tmpCourseId);
          tmp.push({
            courseId: tmpCourseId,
            type: geneType(tmpCourseId),
            image: `https://4c-2024-whu-edu-web.oss-cn-wuhan-lr.aliyuncs.com/onlyNeededImg/${tmpCourseId}.jpg`,
            rate: geneRate(tmpCourseId),
          });
        }

        courses.value = tmp;
        // console.log(courses.value);
      },
      { immediate: true }
    );

    onMounted(() => {
      handlePageChange(page.value);
    });

    return {
      courses,
      page,
      handlePageChange,
    };
  },
};
</script>

<style scoped>
.courseList {
  display: flex;
  flex-wrap: wrap;
  flex: auto;
  justify-content: space-around;
  align-items: center;
  height: 70vh;
  margin-top: 2vh;
  margin-left: 2vw;
}

.courseItem {
  flex: auto;
  box-sizing: border-box;
  border-radius: 5px;
  margin-bottom: 5px; /* 设置项之间的间隙为 20px */
}
.img {
  width: 22vw;
  height: 100%;
  object-fit: fill;
  vertical-align: bottom;
  border-radius: 5px;
}

.top {
  display: flex;
  flex-direction: column;
  margin-top: 1vh;
}

.nav {
  display: flex;
  justify-content: center;
  margin-top: 0.5vh;
}

.courseDsp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #777;
  border-radius: 3px;
  background-color: #fff;
  box-sizing: border-box;
  width: 22vw;
}

a {
  text-decoration: none;
  color: rgb(76, 100, 109);
}

.router-link-active {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.router-link-active:hover {
  background-color: #0056b3;
}

span {
  display: inline-block;
  padding: 8px 16px;
  margin: 5px;
  color: #000;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

span:hover {
  background-color: #e2e6ea;
}

button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  color: #fff;
  background-color: skyblue;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #1b8bd1;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 1vh 0;
}

.rate {
  margin-top: 2vh;
}
</style>
